<template>
	<view class="index-page">
		<view class="page-top-box">
			<view class="swiper-box">
				<u-swiper :list="swiperList" :height="145" :indicator="true" keyName="image" indicatorMode="dot"
					@click="swiperDetail"> </u-swiper>
			</view>
			<view class="top-menu-box">
				<image :src="coursesType5.image" class="menu-item" @click="navigatorPage('/pages/shop/coffee')"
					v-if="coursesType5"></image>
				<image :src="coursesType4.image" class="menu-item"
					@click="navigatorPage('/pages/courses/coursesList3?id='+coursesType4.id)" v-if="coursesType4">
				</image>
			</view>
		</view>
		<view class="page-active-page" @click="navigatorPage('/pages/reservation/activity')">
			<image src="../../static/index/active.png" class="active"></image>
		</view>

		<view class="page-bottom-box">
			<view class="bottom-left" v-if="coursesType1">
				<image :src="coursesType1.image" class="left-title"
					@click="navigatorPage('/pages/courses/coursesList?id='+coursesType1.id)">
				</image>
				<view class="left-content">
					<image :src="item.image" class="menu-item"
						@click="navigatorPage('/pages/courses/coursesList?index='+index+'&id='+coursesType1.id)"
						v-for="(item,index) in coursesType1.course_category_list" :key="index"></image>
				</view>
			</view>
			<view class="bottom-right" v-if="coursesType2&&coursesType3">
				<image :src="coursesType2.image" class="right-title"
					@click="navigatorPage('/pages/courses/coursesList1?id='+coursesType2.id)">
				</image>
				<view class="right-content1">
					<image :src="item.image" class="menu-item"
						@click="navigatorPage('/pages/courses/coursesList1?index='+index+'&id='+coursesType2.id)"
						v-for="(item,index) in coursesType2.course_category_list" :key="index"></image>
				</view>
				<image :src="coursesType3.image" class="right-title"
					@click="navigatorPage('/pages/courses/coursesList2?id='+coursesType3.id)">
				</image>
				<view class="right-content2">
					<view class="menu-item"
						@click="navigatorPage('/pages/courses/coursesList2?index='+index+'&id='+coursesType3.id)"
						v-for="(item,index) in coursesType3.course_category_list" :key="index">{{item.name}}</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				swiperList: [],
				coursesType1: null, //18888院校
				coursesType2: null, //淘玩
				coursesType3: null, //专项进阶
				coursesType4: null, //即刻健身
				coursesType5: null, //咖啡
			}
		},
		computed: mapGetters(['isLogin', 'uid', 'userInfo']),
		onLoad() {
			this.getIndexData()
			this.getBannerList()
		},
		methods: {
			swiperDetail(e) {
				if (this.swiperList[e].url) {
					this.navigatorPage(this.swiperList[e].url)
				}
			},
			//页面跳转
			navigatorPage(page, auth = true) {
				if (auth && !this.isLogin) {
					this.$Tips("/pages/login/login");
				} else {
					this.$Tips(page);
				}
			},
			getBannerList() {
				// 'https://oss.bigchun.com/xiangshang/uploads/20241230/db8096a31196c9eb32ba990ece06c234.png',
				this.$Api.common.getBannerList({
					type: 1
				}).then(res => {
					this.swiperList = res.data
				})
			},
			getIndexData() {
				this.$Api.common.getIndexData().then(res => {
					this.coursesType1 = res.data[0]
					this.coursesType2 = res.data[1]
					this.coursesType3 = res.data[2]
					this.coursesType4 = res.data[3]
					this.coursesType5 = res.data[4]
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-page {
		height: 100%;
		min-height: 100vh;
		background: #ffffff;

		.page-top-box {
			// padding: 0rpx 0 24rpx;

			.swiper-box {}

			.top-menu-box {
				margin-top: 24rpx;
				padding: 20rpx 24rpx;
				display: flex;
				justify-content: space-between;
				background: #A3C616;

				.menu-item {
					width: 342rpx;
					height: 108rpx;
					border-radius: 20rpx;
					overflow: hidden;
				}
			}
		}

		.page-active-page {
			margin: 22rpx 24rpx 0;

			.active {
				width: 100%;
				height: 124rpx;
			}
		}

		.page-bottom-box {
			margin: 22rpx 24rpx 0;
			display: flex;
			justify-content: space-between;

			.bottom-left {
				.left-title {
					width: 380rpx;
					height: 80rpx;
				}

				.left-content {
					margin-top: 18rpx;
					width: 380rpx;
					padding: 20rpx;
					border-radius: 28rpx;
					box-sizing: border-box;
					border: 2rpx solid #A3C616;

					.menu-item {
						width: 100%;
						height: 166rpx;
						margin-bottom: 14rpx;
					}

					.menu-item:last-child {
						margin-bottom: 0;
					}
				}
			}

			.bottom-right {
				width: 300rpx;

				.right-title {
					width: 300rpx;
					height: 80rpx;
				}

				.right-content1 {
					height: 226rpx;
					padding: 20rpx;
					border-radius: 28rpx;
					box-sizing: border-box;
					background: #A3C616;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 20rpx;
					margin-top: 18rpx;

					.menu-item {
						width: 124rpx;
						height: 160rpx;
					}
				}

				.right-content2 {
					padding: 12rpx 20rpx;
					border-radius: 28rpx;
					box-sizing: border-box;
					border: 2rpx solid #A3C616;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					margin-top: 18rpx;

					.menu-item {
						width: 124rpx;
						height: 56rpx;
						background: #A3C616;
						border-radius: 7rpx;
						margin-bottom: 12rpx;
						text-align: center;
						color: #ffffff;
						line-height: 56rpx;
					}
				}
			}
		}
	}
</style>